<template>
    <!-- 老人前台点击活动title显示活动详情对话框 -->
    <el-dialog
        title="活动详细信息"
        :visible.sync="dialogVisible"
        width="50%"
        >
        <div style="width: 100%; height: 450px; overflow: auto;">

            <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in [form.active_image_one,form.active_image_two]" :key="item">
                    <el-image
                    style="width: 100%; height: 120%"
                    :src="item"
                    fit="fill"></el-image>
                </el-carousel-item>
            </el-carousel>

            <el-descriptions direction="vertical" :column="4" border style="margin-top: 5px;">
                <el-descriptions-item label="活动名">{{ form.active_name }}</el-descriptions-item>
                <el-descriptions-item label="活动地址" :span="3">{{ form.active_address }}</el-descriptions-item>
                <el-descriptions-item label="活动状态" >{{ form.status }}</el-descriptions-item>
                <el-descriptions-item label="开始时间" >{{ form.start_time }}</el-descriptions-item>
                <el-descriptions-item label="结束时间" >{{ form.end_time }}</el-descriptions-item>
                <el-descriptions-item label="负责人">
                    <el-tag size="small">{{ form.active_employee_name }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="活动内容" :span="4">{{ form.context }}</el-descriptions-item>
                <el-descriptions-item label="活动总结">{{ form.summary }}</el-descriptions-item>
            </el-descriptions>

        </div>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="joinActive">报 名</el-button>
            <el-button @click="dialogVisible = false">关 闭</el-button>
        </span>
</el-dialog>

</template>

<script>
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    export default {
        name:'UserIndexActiveDetailForTitle',
        data() {
            return {
                dialogVisible:false,
                // 活动信息
                form:{},
            }
        },
        methods:{
            // 报名参加活动
            joinActive(){
                const older_id = JSON.parse(sessionStorage.getItem('user')).id;     // 报名活动的老人id
                const older_name = JSON.parse(sessionStorage.getItem('user')).username;
                myAxios(
                    'http://localhost:8088/older/joinactiveonolder',
                    'post',
                    Qs.stringify(
                        {
                            active_id:this.form.id,
                            older_id:older_id,
                            active_name:this.form.active_name,
                            older_name:older_name,
                        }
                    ),
                    (data)=>{ 
                        // 提示一下
                        this.$message({
                            message: '报名成功,等待员工审核!',
                            type: 'success'
                        });
                    }
                )
            },
            // 事件回调
            userIndexActiveDetailForTitle(item){
                this.form = item;
                console.log(this.form);
                this.dialogVisible = true;
            }
        },
        mounted(){
            // 绑定自定义事件
            this.$bus.$on('userIndexActiveDetailForTitle',this.userIndexActiveDetailForTitle);
        },
        beforeDestroy(){
            // 解绑
            this.$bus.$off('userIndexActiveDetailForTitle');
        }
    }
</script>

<style lang="less" scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>